<template>
  <div class="menu-page">
    <ul>
      <li v-for="item in pages" :key="item.path" @click="handleGoRouter(item.path)">{{item.style.navigationBarTitleText}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: [
        {
          path: "pages/form/index",
          style: {
            navigationBarTitleText: "sun-form示例"
          }
        }
      ]
    };
  },
  methods: {
    handleGoRouter(path) {
      uni.navigateTo({ url: `/${path}` });
    }
  }
};
</script>

<style lang="less">
.menu-page {
  display: flex;
  height: 100%;
  padding: 40rpx;
  box-sizing: border-box;
  & ._ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    & ._li {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      margin-bottom: 5rpx;
      border-radius: 10px;
      transition: all 0.3s;
      background-color: #409eff;
      color: #fff;
      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.04);
      }
    }
  }
}
</style>